<!DOCTYPE html>
<html lang="ch">
    <head>
        <meta charset="UTF-8"
            name="viewport"
            content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <title>New VQ</title>
        <link rel="shortcut icon" href="../../img/icon.jpg">

        <script src="https://unpkg.com/vue@3"></script>
        <!-- import CSS -->
        <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
        <!--图标-->
        <script src="//unpkg.com/@element-plus/icons-vue"></script>
        <!-- import JavaScript -->
        <script src="https://unpkg.com/element-plus"></script>

        <script src="../../res_js/axios-0.18.0.js"></script>
        <script src="../../res_js/jquery-3.7.0.min.js"></script>

        <link rel="stylesheet" href="../../index.css">
        <link rel="stylesheet" href="../index.css">
        <link rel="stylesheet" href="./css/index.css">
        <script src="../../index.js"></script>
        <script src="../index.js"></script>
    </head>
    <body style="margin: 0;overflow: hidden">
        <div id="app">
            <!--主体-->
            <el-container>
                <!--标题栏-->
                <el-header>
                    <el-menu
                            :default-active="activeIndex"
                            class="el-menu-demo"
                            mode="horizontal"
                            :ellipsis="false"
                            @select="handleSelect">
                        <el-menu-item><el-avatar shape="square" :size="20" fit="contain" src="/img/icon1.jpg"></el-avatar></el-menu-item>
                        <el-menu-item style="width: 13%" index="1" onclick="window.location.href='/PE/home/index.html'">主页</el-menu-item>
                        <el-menu-item style="width: 13%" index="2" onclick="window.location.href='/PE/friend/index.html'">好友</el-menu-item>
                        <el-menu-item style="width: 13%" index="3" onclick="window.location.href='/PE/sala/index.html'">大厅</el-menu-item>
                        <div class="flex-grow"></div>
                        <el-menu-item style="padding-left: 2%; padding-right: 2%" index="4" onclick="window.location.href='/PE/search/index.html'"><el-icon><Search></Search></el-icon>搜素&ensp;</el-menu-item>
                        <el-menu-item @click="userDrawer=true"><template #title><el-avatar src="/img/HeadSculpture.jpg" fit="cover"></el-avatar></template></el-menu-item>
                    </el-menu>
                </el-header>
                <!--内容-->
                <el-main class="main" style=" background-color: #D3DCE6;">
                    <!--搜素-->
                    <el-form style="width: 100%; margin: 1%" :inline="true">
                        <el-form-item style="margin: 0%">
                            <el-input v-model="searchContent" placeholder="搜素"></el-input>
                        </el-form-item>
                        <el-form-item style="margin: 0%">
                            <el-button type="primary" @click="search()">&emsp;搜&emsp;索&emsp;</el-button>
                        </el-form-item>
                    </el-form>
                    <!--搜素内容-->
                    <el-tabs type="border-card">
                        <!--动态-->
                        <el-tab-pane style="height: 80vh; overflow: auto;" label="动态">
                            <div v-for="trend in trends">
                                <!--动态-->
                                <el-card style="width: 90%; margin-left: 5%; margin-top: 2%; margin-bottom: 1%" class="box-card">
                                    <!--标头-->
                                    <template #header>
                                        <div slot="header" class="clearfix" @click="this.hTrend=trend; userInformationDialog=true">
                                            <el-avatar src="/img/HeadSculpture.jpg" style="margin-top: auto; float: left;">{{trend.username}}</el-avatar>
                                            <el-link style="margin-left: 1%;float: left;" :underline="false">{{trend.username}}</el-link>
                                            <el-button style="margin-left: auto; float: right; padding: 3px 0; color: red;" type="text"><a style="color: darkgray;">{{trend.time}}</a>&emsp;举报</el-button>
                                        </div>
                                    </template>
                                    <!--内容-->
                                    <el-card @click="open('/PE/trends/index.html?id='+trend.id)" style="text-align: left;line-height: 1;height: 6vh" shadow="never" class="box-card">
                                        <span style="margin-bottom: 1%" v-html="trend.title"></span>
                                        <span v-if="trend.title===null||trend.title===''" v-html="trend.content.substr(0,100)"></span>
                                    </el-card>
                                    <!--标签功能-->
                                    <div>
                                        <!--标签-->
                                        <el-form><el-form-item>
                                            <div v-for="tag in trend.comTags">
                                                <el-tag @click="selectCommunity(tag);communityInformationDialog=true">{{tag}}</el-tag>&ensp;
                                            </div>
                                        </el-form-item></el-form>
                                        <!--功能-->
                                        <div style="margin-bottom: 1%; float: right; font-size: 50%;">
                                            <el-button size="medium" type="danger" @click="like(trend)" circle><el-icon><Pointer></Pointer></el-icon></el-button>&emsp;{{trend.likesNum}}&emsp;
                                            <el-button size="medium" type="warning" @click="collect(trend)" circle><el-icon><Star></Star></el-icon></el-button>&emsp;{{trend.collectNum}}&emsp;
                                            <el-button size="medium" type="primary" @click="this.critique.trendsId=trend.id; critiqueDrawer=true" circle><el-icon><chat-dot-square></chat-dot-square></el-icon></el-button>&emsp;{{trend.critiqueNum}}&emsp;
                                        </div>
                                    </div>
                                </el-card>
                            </div>
                        </el-tab-pane>
                        <!--社区-->
                        <el-tab-pane style="height: 80vh; overflow: auto;" label="社区">
                            <div v-for="community in communities">
                                <el-card style=" margin: 2%; text-align: left;" shadow="always">
                                    <table style="width: 100%">
                                        <tr>
                                            <td><div @click="searchTrendsByCommunity(community.name)">名称：{{community.name}}&emsp;关注数：{{community.numberFollowers}}</div></td>
                                            <td><el-button type="primary" @click="addCommunityMember(community.id)">加入</el-button></td>
                                        </tr>
                                    </table>
                                </el-card>
                            </div>
                        </el-tab-pane>
                        <!--用户-->
                        <el-tab-pane style="height: 80vh; overflow: auto;" label="用户">
                            <div v-for="user in users">
                                <el-card style=" margin: 2%; text-align: left;" shadow="always">
                                    {{user.username}}&emsp;&emsp;{{user.account}}
                                    <el-button type="primary" style="float: right" @click="insertFriend(user.account)">添加</el-button>
                                </el-card>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </el-main>
            </el-container>

            <!--登录注册-->
            <el-drawer
                    title="登录注册"
                    size="65%"
                    v-model="logInDrawer"
                    direction="btt"
                    :before-close="handleClose">
                <el-tabs style="margin: 5%" v-model="activeName" @tab-click="handleClick">
                    <!--登录-->
                    <el-tab-pane label="登录" name="1">
                        <el-form ref="form" :model="logInForm" label-width="80px">
                            <el-form-item label="账号">
                                <el-input v-model="logInForm.account"></el-input>
                            </el-form-item>
                            <el-form-item label="密码">
                                <el-input type="password" v-model="logInForm.password"></el-input>
                            </el-form-item>
                        </el-form>
                        <div style="margin-top: 8%; margin-bottom: 14%" slot="footer" class="dialog-footer">
                            <el-button style="float: left" @click="logInDrawer  = false">取 消</el-button>
                            <el-button style="float: right" type="primary" @click="logIn">登 录</el-button>
                        </div>
                    </el-tab-pane>
                    <!--注册-->
                    <el-tab-pane label="注册" name="2">
                        <el-form ref="form" :model="registerForm" label-width="80px">
                            <el-form-item label="电子邮箱">
                                <el-input v-model="registerForm.email"></el-input>
                            </el-form-item>
                            <el-form-item label="验证码">
                                <el-input style="width: 55%" v-model="registerForm.captcha"></el-input>
                                <el-button style="width: 35%; margin-left: 7%" type="primary" :disabled="sendCaptchaBtnDis"  @click="sendCaptcha('register', registerForm.email)" round>{{sendCaptchaBtnValue}}</el-button>
                            </el-form-item>
                            <el-form-item label="用户名">
                                <el-input v-model="registerForm.username"></el-input>
                            </el-form-item>
                            <el-form-item label="密码">
                                <el-input type="password" placeholder="长度需要在6-20位之内，且须含有字母和数字" v-model="registerForm.password1"></el-input>
                            </el-form-item>
                            <el-form-item label="确认密码">
                                <el-input type="password" placeholder="长度需要在6-20位之内，且须含有字母和数字" v-model="registerForm.password2"></el-input>
                            </el-form-item>
                        </el-form>
                        <div style="margin-top: 8%; margin-bottom: 14%" slot="footer" class="dialog-footer">
                            <el-button style="float: left" @click="logInDrawer  = false">取 消</el-button>
                            <el-button style="float: right" type="primary" @click="register">注 册</el-button>
                        </div>
                    </el-tab-pane>
                    <!--忘记密码-->
                    <el-tab-pane label="忘记密码" name="3">
                        <el-form ref="form" :model="forgotPasswordForm" label-width="80px">
                            <el-form-item label="电子邮箱">
                                <el-input v-model="forgotPasswordForm.email"></el-input>
                            </el-form-item>
                            <el-form-item label="验证码">
                                <el-input style="width: 55%" v-model="forgotPasswordForm.captcha"></el-input>
                                <el-button style="width: 35%; margin-left: 7%" type="primary" :disabled="sendCaptchaBtnDis"  @click="sendCaptcha('forgotPassword', forgotPasswordForm.email)" round>{{sendCaptchaBtnValue}}</el-button>
                            </el-form-item>
                            <el-form-item label="密码">
                                <el-input type="password" placeholder="长度需要在6-20位之内，且须含有字母和数字" v-model="forgotPasswordForm.password1"></el-input>
                            </el-form-item>
                            <el-form-item label="确认密码">
                                <el-input type="password" placeholder="长度需要在6-20位之内，且须含有字母和数字" v-model="forgotPasswordForm.password2"></el-input>
                            </el-form-item>
                        </el-form>
                        <div style="margin-top: 8%; margin-bottom: 14%" slot="footer" class="dialog-footer">
                            <el-button style="float: left" @click="logInDrawer = false">取 消</el-button>
                            <el-button style="float: right" type="primary" @click="forgotPassword()">忘 记</el-button>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </el-drawer>
            <!--用户-->
            <el-drawer
                    title="用户"
                    v-model="userDrawer"
                    direction="rtl"
                    :size="300">
                <!--用户信息-->
                <el-card class="box-card">
                    <el-avatar :size="60" style="margin: 0 0 8% 0; float: left" src="/img/HeadSculpture.jpg" fit="cover"></el-avatar>
                    <dic style="float: left; text-align: left; margin-top: -1vh; margin-left: 1vw">
                        <p>{{this.myUser.username}}</p>
                        <p style="font-size: 80%">ID: {{this.myUser.account}}</p>
                    </dic>
                </el-card>
                <!--功能区-->
                <table align="center" style="width: 100%; margin: 4% 0 4% 0">
                    <tr>
                        <td colspan="2"><el-button style="width: 100%" type="warning" onclick="window.location.href='/PE/userCenter/index.html'" round>&emsp;用&emsp;户&emsp;中&emsp;心&emsp;</el-button></td>
                    </tr>
                    <tr>
                        <td><el-button style="width: 100%" type="primary" @click="modifyUsernameDrawer=true" round>修改名称</el-button></td>
                        <td><el-button style="width: 100%" type="primary" @click="modifyPasswordDrawer=true" round>修改密码</el-button></td>
                    </tr>
                    <tr>
                        <td><el-button style="width: 100%" type="info" tag="a" href="https://wwp.lanzoup.com/iEC150pka3la" target="_blank" round>下载软件</el-button></td>
                        <td><el-button style="width: 100%" type="danger" @click="exitAccount()" round>退出登录</el-button></td>
                    </tr>
                </table>
                <!--消息中心-->
                <div style="width:100%; height: 80%; overflow: auto">
                    <el-card style="margin: 2%" shadow="hover">
                        欢迎使用VQ0.8.1测试版
                        <!--分割线-->
                        <el-divider></el-divider>
                        本次更新：
                        <ol>
                            <li>更新动态和大厅UI及其交互。</li>
                            <li>修复发布动态按钮不显示的问题。</li>
                        </ol>
                    </el-card>
                </div>
            </el-drawer>
            <!--修改名称-->
            <el-drawer
                    title="修改名称"
                    size="50%"
                    v-model="modifyUsernameDrawer"
                    direction="btt"
                    :before-close="handleClose">
                <el-form ref="modifyUsernameForm" :model="modifyUsernameForm" label-width="80px">
                    <el-form-item label="账号">
                        <el-input v-model="modifyUsernameForm.account"></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input type="password" v-model="modifyUsernameForm.password"></el-input>
                    </el-form-item>
                    <el-form-item label="新名称">
                        <el-input v-model="modifyUsernameForm.newUsername"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="ackModifyUsername">修改</el-button>
                        <el-button @click="modifyUsernameDrawer = false">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-drawer>
            <!--修改密码-->
            <el-drawer
                    title="修改密码"
                    size="50%"
                    v-model="modifyPasswordDrawer"
                    direction="btt"
                    :before-close="handleClose">
                <el-form ref="modifyPasswordForm" :model="modifyPasswordForm" label-width="80px">
                    <el-form-item label="旧密码">
                        <el-input type="password" v-model="modifyPasswordForm.oldPassword"></el-input>
                    </el-form-item>
                    <el-form-item label="新密码">
                        <el-input type="password" placeholder="长度需要在6-20位之内，且须含有字母和数字" v-model="modifyPasswordForm.newPassword1"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码">
                        <el-input type="password" placeholder="长度需要在6-20位之内，且须含有字母和数字" v-model="modifyPasswordForm.newPassword2"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="ackModifyPassword">修改</el-button>
                        <el-button @click="modifyPasswordDrawer = false">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-drawer>

            <!--社区动态-->
            <el-drawer
                    v-model="communityTrendsDrawer"
                    title="社区"
                    size="90%"
                    direction="btt">
                <div v-for="trend in communityTrends">
                    <!--动态-->
                    <el-card style="width: 90%; margin-left: 5%; margin-top: 2%; margin-bottom: 1%" class="box-card">
                        <!--标头-->
                        <template #header>
                            <div slot="header" class="clearfix" @click="this.hTrend=trend; userInformationDialog=true">
                                <el-avatar src="/img/HeadSculpture.jpg" style="margin-top: auto; float: left;">{{trend.username}}</el-avatar>
                                <el-link style="margin-left: 1%;float: left;" :underline="false">{{trend.username}}</el-link>
                                <el-button style="margin-left: auto; float: right; padding: 3px 0; color: red;" type="text"><a style="color: darkgray;">{{trend.time}}</a>&emsp;举报</el-button>
                            </div>
                        </template>
                        <!--内容-->
                        <el-card @click="open('/PE/trends/index.html?id='+trend.id)" style="text-align: left;line-height: 1;height: 6vh" shadow="never" class="box-card">
                            <span style="margin-bottom: 1%" v-html="trend.title"></span>
                            <span v-if="trend.title===null||trend.title===''" v-html="trend.content.substr(0,100)"></span>
                        </el-card>
                        <!--标签功能-->
                        <div>
                            <!--标签-->
                            <el-form><el-form-item>
                                <div v-for="tag in trend.comTags">
                                    <el-tag @click="selectCommunity(tag);communityInformationDialog=true">{{tag}}</el-tag>&ensp;
                                </div>
                            </el-form-item></el-form>
                            <!--功能-->
                            <div style="margin-bottom: 1%; float: right; font-size: 50%;">
                                <el-button size="medium" type="danger" @click="like(trend)" circle><el-icon><Pointer></Pointer></el-icon></el-button>&emsp;{{trend.likesNum}}&emsp;
                                <el-button size="medium" type="warning" @click="collect(trend)" circle><el-icon><Star></Star></el-icon></el-button>&emsp;{{trend.collectNum}}&emsp;
                                <el-button size="medium" type="primary" @click="this.critique.trendsId=trend.id; critiqueDrawer=true" circle><el-icon><chat-dot-square></chat-dot-square></el-icon></el-button>&emsp;{{trend.critiqueNum}}&emsp;
                            </div>
                        </div>
                    </el-card>
                </div>
            </el-drawer>
            <!--查看全部-->
            <el-drawer
                    title="动态"
                    size="90%"
                    v-model="trendsDrawer"
                    direction="btt">
                <!--标头-->
                <div slot="header" class="clearfix" style="margin-bottom: 10%">
                    <el-avatar src="/img/HeadSculpture.jpg" style="margin-top: auto; float: left;">{{hTrend.username}}</el-avatar>
                    <el-link style="margin-left: 1%;float: left;" :underline="false">{{hTrend.username}}</el-link>
                    <el-button style="margin-left: auto; float: right; padding: 3px 0; color: red;" type="text"><a style="color: darkgray;">{{hTrend.time}}</a>&emsp;举报</el-button>
                </div>
                <el-divider></el-divider>
                <div style="text-align: center; font-size: 18px">{{hTrend.title}}</div>
                <!--内容-->
                <el-card style="margin-top: 1%; text-align: left; line-height: 1.2;" shadow="never" class="box-card">
                    <span style="margin-bottom: 1%" v-html="hTrend.content"></span>
                </el-card>
                <!--标签功能-->
                <div style="margin-top: 3%">
                    <!--标签-->
                    <el-form><el-form-item>
                        <div v-for="tag in hTrend.comTags">
                            <el-tag @click="selectCommunity(tag);communityInformationDialog=true">{{tag}}</el-tag>&ensp;
                        </div>
                    </el-form-item></el-form>
                    <!--功能-->
                    <div style="margin-bottom: 1%; float: right; font-size: 50%;">
                        <el-button size="medium" type="danger" @click="like(hTrend)" circle><el-icon><Pointer></Pointer></el-icon></el-button>&emsp;{{hTrend.likesNum}}&emsp;
                        <el-button size="medium" type="warning" @click="collect(hTrend)" circle><el-icon><Star></Star></el-icon></el-button>&emsp;{{hTrend.collectNum}}&emsp;
                        <el-button size="medium" type="primary" @click="this.critique.trendsId=hTrend.id; critiqueDrawer=true" circle><el-icon><chat-dot-square></chat-dot-square></el-icon></el-button>&emsp;{{hTrend.critiqueNum}}&emsp;
                    </div>
                </div>
                <!--评论区-->
                <h4 style=" float: left; margin-top: 10%">评论</h4>
                <el-card style="line-height: 1.2;" shadow="never" class="box-card">
                    <div v-for="critique in critiques">
                        <table cellspacing="30" style="width: 100%;float: left; text-align: left;">
                            <tr>
                                <td width="30"><el-avatar src="/img/HeadSculpture.jpg" ></el-avatar></td>
                                <td>{{critique.username}}</td>
                                <td style="text-align: right; font-weight: lighter;">{{critique.time}}</td>
                            </tr>
                            <tr>
                                <td colspan="3">{{critique.content}}</td>
                            </tr>
                        </table>
                        <hr>
                    </div>
                </el-card>
            </el-drawer>
            <!--查看用户-->
            <el-dialog
                    title="用户信息"
                    v-model="userInformationDialog"
                    width="80%"
                    style="border-radius: 10px"
                    align-center>
                <table style="width: 100%;">
                    <tr>
                        <td rowspan="2"><el-avatar src="/img/HeadSculpture.jpg" style="margin-top: auto; float: left;">{{trend.username}}</el-avatar></td>
                        <td>{{this.hTrend.username}}</td>
                    </tr>
                    <tr>
                        <td>{{this.hTrend.account}}</td>
                    </tr>
                    <tr><td colspan="2"><el-divider></el-divider></td></tr>
                    <tr>
                        <td align="center"><el-button type="danger" round>举 报</el-button></td>
                        <td align="center"><el-button  type="primary" @click="insertFriend(this.hTrend.account)" round>添 加</el-button></td>
                    </tr>
                </table>
            </el-dialog>
            <!--动态评论-->
            <el-drawer
                    title="评论"
                    size="50%"
                    v-model="critiqueDrawer"
                    direction="btt"
                    :before-close="handleClose">
                <el-form ref="form" :model="form" label-width="80px">
                    <el-input
                            type="textarea"
                            placeholder="请输入内容"
                            v-model="critique.content"
                            clearable="true"
                            maxlength="1000"
                            autosize>
                    </el-input>
                </el-form>
                <div style="margin-top: 8%; margin-bottom: 14%" slot="footer" class="dialog-footer">
                    <el-button style="float: left" @click="critiqueDrawer = false">取消</el-button>
                    <el-button style="float: right" type="primary" @click="critiqueTrends()">评论</el-button>
                </div>
            </el-drawer>
            <!--查看社区-->
            <el-dialog
                    title="社区信息"
                    v-model="communityInformationDialog"
                    width="80%"
                    style="border-radius: 10px"
                    align-center>
                <table style="width: 100%;">
                    <tr>
                        <td style="float: left">{{this.hCommunity.name}}</td>
                        <td style="float: right; color: red;">举 报</td>
                    </tr>
                    <tr>
                        <td style="float: left">成员数：{{this.hCommunity.numberFollowers}}</td>
                        <td style="float: right"><el-button key="primary" type="primary" @click="addCommunityMember(this.hCommunity.id)" link>加 入</el-button></td>
                    </tr>
                </table>
            </el-dialog>
        </div>

        <script src="js/index.js"></script>
    </body>
</html>